import React, {PropTypes} from 'react';
import {Form, Input, Card, Row, Col, Button} from 'antd';

const FormItem = Form.Item;

function Login({
    onSubmit,
    form: {
        getFieldDecorator,
        validateFields,
        getFieldsValue,
    }
}) {
    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 14},
    };
    const tailFormItemLayout = {
        wrapperCol: {
            span: 14,
            offset: 11,
        },
    };

    function handleOk() {
        validateFields((errors) => {
            if (errors) {
                return;
            }
            const data = {...getFieldsValue()};//获取input数据
            onSubmit(data);
        });
    }

    return (
        <Form horizontal onSubmit={handleOk}>
            <FormItem
                {...formItemLayout}
                label="用户名"
                hasFeedback
            >
                {getFieldDecorator('username', {
                    rules: [{
                        required: true, message: '请输入用户名',
                    }],
                })(
                    <Input />
                )}
            </FormItem>
            <FormItem
                {...formItemLayout}
                label="Password"
                hasFeedback
            >
                {getFieldDecorator('password', {
                    rules: [{
                        required: true, message: '请输入密码',
                    }],
                })(
                    <Input type="password"/>
                )}
            </FormItem>
            <FormItem {...tailFormItemLayout}>
                <Button type="primary" onClick={handleOk} size="large">登陆</Button>
            </FormItem>
        </Form>
    );
}

Login.propTypes = {
    showError: PropTypes.any,
    onSubmit: PropTypes.func,
    form: PropTypes.object,
};

export default Form.create()(Login);
